<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <!-- Standard Meta -->
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>

    <!-- Site Properties -->
    <title>宠物领养中心主页</title>

    <link rel="stylesheet"
          href="semantic_files/semantic/dist/semantic.min.css">

    <script src="css/jquery-3.1.1.min.js"></script>

    <script src="semantic_files/semantic/dist/semantic.min.js"></script>

    <script src="css/vue.min.js"></script>

    <script src="css/axios.min.js"></script>

    <style type="text/css">

        #top-image {
            background: url("images/index/cats.jpg") no-repeat center;
        }

        .hidden.menu {
            display: none;
        }

        .masthead.segment {
            min-height: 700px;
            padding: 1em 0em;
        }

        .masthead .logo.item img {
            margin-right: 1em;
        }

        .masthead .ui.menu .ui.button {
            margin-left: 0.5em;
        }

        .masthead h1.ui.header {
            margin-top: 3em;
            margin-bottom: 0em;
            font-size: 4em;
            font-weight: normal;
        }

        .masthead h2 {
            font-size: 1.7em;
            font-weight: normal;
        }

        .ui.vertical.stripe {
            padding: 8em 0em;
        }

        .ui.vertical.stripe h3 {
            font-size: 2em;
        }

        .ui.vertical.stripe .button + h3,
        .ui.vertical.stripe p + h3 {
            margin-top: 3em;
        }

        .ui.vertical.stripe .floated.image {
            clear: both;
        }

        .ui.vertical.stripe p {
            font-size: 1.33em;
        }

        .ui.vertical.stripe .horizontal.divider {
            margin: 3em 0em;
        }

        .quote.stripe.segment {
            padding: 0em;
        }

        .quote.stripe.segment .grid .column {
            padding-top: 5em;
            padding-bottom: 5em;
        }

        .footer.segment {
            padding: 5em 0em;
        }

        .secondary.pointing.menu .toc.item {
            display: none;
        }

        @media only screen and (max-width: 700px) {
            .ui.fixed.menu {
                display: none !important;
            }

            .secondary.pointing.menu .item,
            .secondary.pointing.menu .menu {
                display: none;
            }

            .secondary.pointing.menu .toc.item {
                display: block;
            }

            .masthead.segment {
                min-height: 350px;
            }

            .masthead h1.ui.header {
                font-size: 2em;
                margin-top: 1.5em;
            }

            .masthead h2 {
                margin-top: 0.5em;
                font-size: 1.5em;
            }
        }


    </style>

    <script>


        $(document)
            .ready(function () {

                // fix menu when passed
                $('.masthead')
                    .visibility({
                        once: false,
                        onBottomPassed: function () {
                            $('.fixed.menu').transition('fade in');
                        },
                        onBottomPassedReverse: function () {
                            $('.fixed.menu').transition('fade out');
                        }
                    })
                ;

                // create sidebar and attach to menu open
                $('.ui.sidebar')
                    .sidebar('attach events', '.toc.item')
                ;
            })
        ;

        // function _init(){
        //     window.setTimeout(function(){
        //         $('#logo')
        //             .transition('scale');
        //     },2000)
        // }

    </script>
</head>
<body>

<!-- 移动目录 -->
<div class="ui large top fixed hidden menu">
    <div class="ui container">
        <a class="active item">主页</a>
        <a class="item" href="petslist.html">领养</a>
        <a class="item" href="addpinfo.html">送养</a>
        <a class="item">联系我们</a>
        <div class="right menu">
            <div class="item">
                <div class="ui action left icon input">
                    <i class="search icon"></i>
                    <input type="text" placeholder="搜索">
                    <button class="ui button">提交</button>
                </div>
            </div>
            <div class="item">
                <a class="ui button" href="login.html">登录</a>
            </div>
            <div class="item">
                <a class="ui button" href="register.html">注册</a>
            </div>
        </div>
    </div>
</div>

<!-- 头部背景和logo文字 -->
<div class="pusher">

    <div id="top-image" class="ui inverted vertical masthead center aligned segment">

        <img id="logo" class="disabled medium ui image middle aligned"
             src="images/index/logo.png" style="opacity: 90%">

        <div id="logo_info" class="ui text container" style="margin-top: -150px">
            <h1 class="ui inverted header">
                每个小肉爪
            </h1>
            <h2>都值得被善待</h2>
            <a href="#minfo">
                <div class="ui huge secondary button scroll">开始<i class="right arrow icon"></i></div>
            </a>
        </div>

    </div>

    <!--目录栏-->
    <div class="ui menu">
        <a class="item" href="index.html" style="margin-left: 150px">
            主页
        </a>
        <a class="item" href="petslist.html">
            领养
        </a>
        <a class="item" href="addpinfo.html">
            送养
        </a>
        <a class="item">
            联系我们
        </a>

        <div class="right menu">
            <div class="item">
                <div class="ui action left icon input">
                    <i class="search icon"></i>
                    <input type="text" placeholder="搜索">
                    <button class="ui button">搜索</button>
                </div>
            </div>
            <div class="item">
                <a class="ui button" href="login.html">登录</a>
            </div>
            <div class="item" style="margin-right: 100px">
                <a class="ui button" href="register.html">注册</a>
            </div>
        </div>
    </div>


    <!--团队介绍-->
    <div class="ui vertical stripe segment">
        <div class="ui middle aligned stackable grid container">
            <div class="row" id="minfo" name="minfo">
                <div class="eight wide column">
                    <h3 class="ui header">欢迎来到宠物之家！</h3>
                    <p>&emsp;&emsp;我们是年轻的公益团队，致力于提供流浪宠物和家养宠物的领养、寄养平台。</p>
                    <h3 class="ui header">欢迎有爱心的你</h3>
                    <p>&emsp;&emsp;我们相信每个小动物都是灵动可爱的，都值得一位铲屎官的青睐，也希望每个来我们这的人能找到他所喜欢的动物精灵。</p>
                </div>
                <div class="six wide right floated column">

                    <img src="images/index/d1.jpg" class="ui large bordered rounded image">
                </div>
            </div>
        </div>
    </div>

    <!--领养须知以及小知识-->
    <div class="ui vertical stripe segment">
        <div class="ui middle aligned stackable grid container">
            <div class="six wide left floated column">
                <img src="images/index/c1.jpg" class="ui large bordered rounded image">
            </div>
                <div class="eight wide column">
                    <h3 class="ui header">领养需知</h3>
                    <p>&emsp;&emsp;xxxxxxxxxxxxxxxxxxx</p>
                    <h4 class="ui horizontal header divider">
                        <a href="homepage.php#">调皮的分界线</a>
                    </h4>
                    <h3 class="ui header">养宠小知识</h3>
                    <p>&emsp;&emsp;xxxxxxxxxxxxxxxxxxx</p>
                </div>
        </div>
    </div>
            <!--领养送养和捐献的主入口-->
            <div class="ui vertical stripe quote segment">
                <div class="ui equal width stackable internally celled grid">
                    <div class="center aligned row">
                        <div class="column">
                            <h3>我要领养</h3>
                            <p>
                                <br/>
                                <i class="heart icon"></i>嗷嗷待哺的小动物们，期待您为他们铲屎。
                            </p>
                            <div class="row">
                                <div class="center aligned column">
                                    <a class="ui huge button" href="petslist.html">爱心入口<i class="right arrow icon"></i></a>
                                </div>
                            </div>
                        </div>
                        <div class="column">
                            <h3>我要送养</h3>
                            <p>
                                <br/>
                                <i class="heart outline icon"></i></i>相信他们遇到的下一任主人会很勤劳地铲屎。
                            </p>
                            <div class="row">
                                <div class="center aligned column">
                                    <a class="ui huge button" href="addpinfo.html">提交信息<i class="right arrow icon"></i></a>
                                </div>
                            </div>
                        </div>
                        <div class="column">
                            <h3>捐赠支持</h3>
                            <p>
                                <br/>
                                <i class="heart icon"></i>有您的支持，我们能帮助更多的小动物。<i class="heart outline icon"></i>
                            </p>
                            <div class="row">
                                <div class="center aligned column">
                                    <a class="ui huge button">捐赠入口<i class="right arrow icon"></i></a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>


            <div class="ui inverted vertical footer segment">
                <div class="ui container">
                    <div class="ui stackable inverted divided equal height stackable grid">
                        <div class="three wide column">
                            <h4 class="ui inverted header">关于</h4>
                            <div class="ui inverted link list">
                                <a href="index.html" class="item">Sitemap</a>
                                <a href="index.html" class="item">Contact Us</a>
                                <a href="index.html" class="item">Religious Ceremonies</a>
                                <a href="index.html" class="item">Gazebo Plans</a>
                            </div>
                        </div>
                        <div class="three wide column">
                            <h4 class="ui inverted header">服务</h4>
                            <div class="ui inverted link list">
                                <a href="index.html" class="item">Banana Pre-Order</a>
                                <a href="index.html" class="item">DNA FAQ</a>
                                <a href="index.html" class="item">How To Access</a>
                                <a href="index.html" class="item">Favorite X-Men</a>
                            </div>
                        </div>
                        <div class="seven wide column">
                            <h4 class="ui inverted header">页脚</h4>
                            <p>Extra space for a call to action inside the footer that could help re-engage users.</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>

</body>

</html>
